<template>
  <div>
    <!-- 文章列表区域 -->
    <div class="article-list">
      <!-- 文章卡片 -->
      <el-space wrap :size="15">
        <el-card
            v-for="(item,index) in articleList"
            :key="'article_'+index"
            @click="articleCardClick(item.articleId)"
            class="article-card"
            shadow="hover"
            :body-style="{ padding: '0' }"
        >
          <div class="post-top" v-if="item.isTop">
            <div>置顶</div>
          </div>
          <!-- 头像 -->
          <el-image class="article-card-img" :src="item.articleImgUrl" draggable="false"/>
          <!-- 内容 -->
          <div class="article-info">
            <div>{{item.title}}</div>
            <p>{{item.brief}}</p>
            <div>
              <span>
                {{parseTime(item.createTime,'{y}-{m}-{d}')}}
              </span>
              <span>
                <el-icon><View/></el-icon>
                {{item.viewNum}}
              </span>
              <span>
                <el-icon><ChatDotSquare/></el-icon>
                {{item.commentNum}}
              </span>
              <span>
                <el-icon><Pointer/></el-icon>
                {{item.goodNum}}
              </span>
            </div>
          </div>
        </el-card>
      </el-space>
    </div>

    <!-- 分页区域 -->
    <div class="pagination">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          v-model:currentPage="queryForm.pageNum"
          v-model:page-size="queryForm.pageSize"
          @current-change="getArticleList"
      />
    </div>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {ChatDotSquare, Pointer, View} from "@element-plus/icons-vue";
import { listArticleApi } from "@/api/article";
import {  ref   } from 'vue';
import {parseTime } from "@/utils/xu";

const router = useRouter();

const props = defineProps({
  // 文章类型
  articleType:{
    type:Number,
    required:true,
    default:1
  }
})

// 文章列表
let articleList = ref([]);
// 分页总数
let total = ref(0);

// 查询表单
let queryForm = ref({
  pageNum:1,
  pageSize:12,
  // 排序字段
  orderByColumn:'createTime',
  // 倒叙
  isAsc:'desc',
  articleType:props.articleType
})
// 查询文章列表
getArticleList();

/** 文章列表点击 */
function articleCardClick(articleId) {
  router.push('articleDetail?articleId=' + articleId);
}

/** 获取文章列表 */
function getArticleList(){
  if(queryForm.value.articleType === 0){
    queryForm.value.articleType = undefined;
  }
  listArticleApi(queryForm.value).then(res=>{
    total.value = res.total;
    articleList.value = res.rowList;
  })
}
</script>

<style scoped>
@import "articleList.css";
</style>
